<template>
  <div
      class="window_prompt_box"
      :style="{'background-color':promptBoxColor}"
      v-if="promptBoxShow">{{promptBoxInfo}}</div>
  <el-table
      :data="tableData"
      :header-cell-style="{'text-align':'center'}"
      :cell-style="{'text-align':'center'}"
      style="width: 970px"
      class="table"
      border>
    <el-table-column label="序号" width="90">
      <template #default="scope0">
        <div>{{scope0.$index+current_page*10-9}}</div>
      </template>
    </el-table-column>
    <el-table-column prop="type" label="商品类型" width="120" />
    <el-table-column prop="good_specific" label="商品种类" width="120" />
    <el-table-column prop="name" label="商品编号" width="120" />
    <el-table-column label="商品预览" width="160" >
      <template #default="scope1">
        <div style="display: flex; align-items: center">
          <img :src="'data:image/png;base64'+scope1.row.url" width="120" height="90"/>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="库存" width="120" >
      <template #default="scope2">
        <span v-if="scope2.row.number==0" style="color:red">{{scope2.row.number}}</span>
        <span v-else>{{scope2.row.number}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="price" label="单价" width="120" />
    <el-table-column label="Operations" width="120">
      <template #default="scope">
        <router-link :to="{path:'/detail',query:{pet:JSON.stringify(petToShow)}}">
          <el-button link type="primary" size="small" @click="Detail(scope.row)">查看详情</el-button>
        </router-link>
        <el-button link type="primary" size="small" @click="Delete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <SplitPage :total_number="number" :page_size="5" @onPageChange="PageChange" class="splitBtn"/>
</template>

<script>
import SplitPage from "@/components/Personal/SplitPage";
export default {
  name: "MyFavorite",
  inject:['reload'],
  data() {
    return {
      allData:[],
      tableData:[],
      number:0,
      current_page:1,
      promptBoxInfo:"",
      promptBoxColor:'',
      promptBoxShow:false,
      petToShow:{},
      user:{}
    }
  },
  methods: {
    Detail(row) {
      this.petToShow.id = row.id
      this.petToShow.fromPage = "3"
      this.$router.push({path:"/detail",query:{pet:JSON.stringify(this.petToShow)}})
      this.reload()
    },
    Delete(row){
      this.$axios
          .delete(`${this.$target}/collect/delete/`+row.collection_id)
          .then(res=>{
            this.showSuccess("删除收藏成功!")
            this.initTable()
          })
    },
    PageChange(newPage){
      this.current_page=newPage
      this.tableData=this.allData.slice(newPage*5-5,newPage*5>this.allData.length?this.allData.length:newPage*5)
    },
    initTable(){
      this.$axios
          .get(`${this.$target}/collect/`+this.user.id)
          .then(res=>{
            this.allData=[]
            for(var i=0;i<res.data.data.length;i++){
              res.data.data[i].animal.collection_id=res.data.data[i].collection_id
              this.allData.push(res.data.data[i].animal)
            }
            this.number=this.allData.length
            if(this.number!=0) {
              if(this.number<=this.current_page*5-5){//一页被删完时
                this.current_page-=1
              }
              this.tableData = this.allData.slice(this.current_page * 5 - 5, this.current_page * 5 > this.allData.length ? this.allData.length : this.current_page * 5)
            }else{//全部被删完
              this.tableData=[]
            }
          })
    },
    showSuccess(text){
      this.promptBoxInfo=text
      this.promptBoxColor='#45cb45'
      this.promptBoxShow=true
      setTimeout(()=>{//用箭头函数保证this指向vue实例
        this.promptBoxShow=false
      }, 1000)
    },
    showError(text){
      this.promptBoxInfo=text
      this.promptBoxColor='#e12a2a'
      this.promptBoxShow=true
      setTimeout(()=>{
        this.promptBoxShow=false
      }, 1000)
    }
  },
  mounted() {
    this.user=JSON.parse(localStorage.getItem("user"))
    this.initTable()
  },
  components: {
    SplitPage
  }
}
</script>

<style scoped>
.table {
  position: relative;
  left: 140px;
  margin-top: 60px;
}
.splitBtn {
  position: relative;
  left:75%;
  margin-top: 30px;
  width: fit-content;
}
.window_prompt_box {
  position: absolute;
  color: white;
  top: 15px;
  left: 45%;
  width: 300px;
  height: 40px;
  border-radius: 10px;
  z-index: 9999;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  padding-top: 4px;
}
</style>